<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home </title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .w{
            width:1280px;
            margin:20px auto;
        }
        a{
            color:inherit;
            text-decoration: none;
        }
        .tone{
            width:100%;
            line-height: 45px;
            text-align:center;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top:20px;
        }
        .tone  td{
            border:1px solid #000;
        }
        html,body{
            width:100%;
            height:100%;
        }
        .home{
            text-align: center;
            width:100%;
            height:100%;
            position: relative;
        }

        .modal , .editmodal{
            width:240px;
            height:200px;
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            display: none;
        }

        label{
            color:#fff;
        }
        .modal .title{
            color:orange;
        }
        .editmodal .title{
            color:orange;
        }
    </style>
</head>
<body> 
    <div class="home">
        <h3>Home - 主页 </h3>
        <div class="islogin">
            <a href="./login_account.html">请登录</a>
            <a href="./register.html">免费注册</a>
        </div>

        <div class="mytable w">
            <div>
                <button class="addaction" >添加成绩</button>
                <button class="addaction" onclick='location.href="./goodlist.html"' >查看商品</button>
            </div>

            <div>
                <input type="text" id="search" placeholder="请输入ID/姓名">
                <button class="searchBtn">点击搜索</button>
                <button class="resetBtn">重置</button>
            </div>

            <table class="tone">
                <thead>
                    <tr>
                        <td  onclick="searchGradeOrder('id','asc')">编号</td>
                        <td  onclick="searchGradeOrder('name','desc')">姓名</td>
                        <td  onclick="searchGradeOrder('class','desc')">班级</td>
                        <td  onclick="searchGradeOrder('chinese','desc')">语文</td>
                        <td  onclick="searchGradeOrder('english','desc')">英语</td>
                        <td  onclick="searchGradeOrder('math','desc')">数学</td>
                        <td  onclick="searchGradeOrder('total','desc')">总分</td>
                        <td>编辑</td>
                        <td>删除</td>
                    </tr>
                </thead>
                <tbody class="tbody">
                    <!-- <tr>
                        <td>1</td>
                        <td>拉拉</td>
                        <td>2106</td>
                        <td>76</td>
                        <td>71</td>
                        <td>89</td>
                        <td>236</td>
                        <td><a href="">编辑</a></td>
                        <td><a href="">修改</a></td>
                    </tr> -->
                </tbody>
            </table>
        </div>

        <div class="modal">
            <h4 class="title">添加成绩</h4>
            <form action="" class="modal-box" autocomplete="off" onsubmit="return false">
                <p>
                    <label for="name">
                        姓名: <input type="text" id="name"  >
                    </label>
                </p>
                <p>
                    <label for="class">
                        班级: <input type="text" id="class"  >
                    </label>
                </p>
                <p>
                    <label for="chinese">
                        语文: <input type="text" id="chinese"  >
                    </label>
                </p>
                <p>
                    <label for="english">
                        英语: <input type="text" id="english"   >
                    </label>
                </p>
                <p>
                    <label for="math">
                        数学: <input type="text" id="math"  >
                    </label>
                </p>
                <p>
                    <button class="addbtn" onclick="addGrade()">添加</button>
                    <!-- reset 取消 关闭  重置   -->
                    <button class="cancelbtn" type="reset" onclick="closemodal()"  >取消</button>
                </p>
            </form>
        </div>

        <div class="editmodal">
                <h4 class="title">编辑成绩</h4>
                <form action="" class="editmodal-box" autocomplete="off" onsubmit="return false">
                    <p>
                        <label for="eid">
                            编号: <input disabled type="text" id="eid"  >
                        </label>
                    </p>
                    <p>
                        <label for="ename">
                            姓名: <input disabled type="text" id="ename"  >
                        </label>
                    </p>
                    <p>
                        <label for="eclass">
                            班级: <input disabled type="text" id="eclass"  >
                        </label>
                    </p>
                    <p>
                        <label for="echinese">
                            语文: <input type="text" id="echinese"  >
                        </label>
                    </p>
                    <p>
                        <label for="eenglish">
                            英语: <input type="text" id="eenglish"   >
                        </label>
                    </p>
                    <p>
                        <label for="emath">
                            数学: <input type="text" id="emath"  >
                        </label>
                    </p>
                    <p>
                        <button class="editbtn" onclick="editGrade()">确认编辑</button>
                        <!-- reset 取消 关闭  重置   -->
                        <button class="cancelbtn" type="reset" onclick="closeeditmodal()"  >取消</button>
                    </p>
                </form>
            </div>
    </div>

    <script>
        // 增删改查  

        var islogin =  document.getElementsByClassName('islogin')[0];
        var mytable  = document.getElementsByClassName("mytable")[0];
        var addaction  = document.getElementsByClassName("addaction")[0];
        var modal  = document.getElementsByClassName("modal")[0];
        var tbody = document.getElementsByClassName('tbody')[0];
        var form = document.getElementsByClassName('modal-box')[0]
        var editmodal = document.getElementsByClassName("editmodal")[0];
        var editform = document.getElementsByClassName("editmodal-box")[0];

        var searchBtn = document.getElementsByClassName("searchBtn")[0];
        var resetBtn = document.getElementsByClassName("resetBtn")[0];
        // 获取 cookie
        var user = getCookie("loginAccount");
        console.log(user)
        
        // 判断用户是否登录 通过 cookie\判断
        if(user){
            islogin.innerHTML = `欢迎你,${user} <button onclick="exit()">退出</button>`;
            mytable.style.display = "block";
        }else{
            mytable.style.display = "none";
        }
        
        // 排序
        function searchGradeOrder(orderCol,orderType){
            $.ajax({
                type:'get',
                data:{
                    orderCol,   // 排序的字段
                    orderType   // 排序的类型  asc 升序  desc 降序 
                },
                url:"../good/02_searchGradesOrder.php",
                dataType:"json",
                success:obj=>{
                    console.log(obj)
                    var {status,detail,result} = obj;
                    var html = "";
                    if(status){
                        // 循环数据渲染
                        // class 关键字                         // 
                        result.forEach(({id,name, class:_class, chinese , math , english,total})=>{
                            html+=`
                                <tr id="item${id}" >
                                    <td>${id}</td>
                                    <td>${name} </td>
                                    <td>${_class}</td>
                                    <td>${chinese}</td>
                                    <td>${math}</td>
                                    <td>${english}</td>
                                    <td>${total}</td>
                                    <td><button  onclick="editGradeOne(${id},'${name}','${_class}','${chinese}','${math}','${english}')"  >编辑</button></td>
                                    <td><button onclick="delGradeOne(${id},event)"  >删除</button></td>
                                </tr>
                            `
                        })
                    }else{
                        // colspan  合并单元格
                        html = "<tr> <td colspan='9'>暂无数据</td> </tr>"
                    }
                    tbody.innerHTML = html;
                }
            })
        }

        // 重置
        resetBtn.onclick = function(){
            loadGrade()
            var search = document.getElementById('search')
            search.value = ""
        }

        // 点击搜索
        searchBtn.onclick = function(){
            var search = document.getElementById('search')
            var keyword  = search.value 
            console.log(keyword)
            $.ajax({
                url:"../php/06_searchGradeByIdOrName.php",
                type:"get",
                data:{
                    // id:keyword   //   ../php/05_searchGradeById.php
                    keyword:keyword  //  ../php/06_searchGradeByIdOrName.php
                },
                dataType:"json",
                success:obj=>{
                    console.log(obj)
                    var {status,detail,result} = obj;
                    var html = "";
                    if(status){
                        // 循环数据渲染
                        // class 关键字                         // 
                        result.forEach(({id,name, class:_class, chinese , math , english,total})=>{
                            html+=`
                                <tr id="item${id}" >
                                    <td>${id}</td>
                                    <td>${name} </td>
                                    <td>${_class}</td>
                                    <td>${chinese}</td>
                                    <td>${math}</td>
                                    <td>${english}</td>
                                    <td>${total}</td>
                                    <td><button  onclick="editGradeOne(${id},'${name}','${_class}','${chinese}','${math}','${english}')"  >编辑</button></td>
                                    <td><button onclick="delGradeOne(${id},event)"  >删除</button></td>
                                </tr>
                            `
                        })
                    }else{
                        // colspan  合并单元格
                        html = "<tr> <td colspan='9'>暂无数据</td> </tr>"
                    }
                    tbody.innerHTML = html;
                }
            })
        } 

        // 退出登录
        function exit(){
            setCookie('loginAccount','',-1);
            mytable.style.display = "none";
            location.reload();
        }

        // 打开添加成绩的模态框
        addaction.onclick = function(){
            modal.style.display = "block"
            editmodal.style.display = "none";
        }
        // 关闭添加成绩的模态框
        function closemodal(){
            modal.style.display = "none";
            
        }
        
        // 编辑成绩  
        function editGradeOne(id,name,_class,chinese,math,english){
            editmodal.style.display = "block";
            modal.style.display = "none";
            //表单赋值 
            editform.eid.value = id;
            editform.ename.value  = name;
            editform.eclass.value  = _class;
            editform.echinese.value  = chinese;
            editform.emath.value  = math;
            editform.eenglish.value  = english;
            
        }
        // 关闭 编辑成绩
        function closeeditmodal(){
            editmodal.style.display = "none";
        }
        // 确认编辑成绩  update 
        function editGrade(){
            var id = editform.eid.value 
            var chinese = editform.echinese.value  
            var math = editform.emath.value  
            var english = editform.eenglish.value  
            
            // ajax
            var xhr = new XMLHttpRequest();
            xhr.open("post","../php/04_udpateGradeById.php",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(`id=${id}&english=${english}&math=${math}&chinese=${chinese}`);
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){
                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    const {status,detail} =  result;
                    if(status){
                        // 修改成功
                        loadGrade()
                        editmodal.style.display = "none";
                    }
                    alert(detail);
                }
            }
        }
        
        // 添加成绩 
        function addGrade(){
            var name = form.name.value;  // 通过表单取值 id 取值  通过id找到某一个元素 直接取值 表单input 
            var _class = form.class.value;  // 通过表单取值 
            var chinese = form.chinese.value;  // 通过表单取值 
            var english = form.english.value;  // 通过表单取值 
            var math = form.math.value;  // 通过表单取值 
            
            console.log(name,_class,chinese,english,math)
            // 写 ajax 
            // var xhr = new XMLHttpRequest();
            // xhr.open("post","../php/03_addGrade.php",true);
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // xhr.send(`name=${name}&class=${_class}&english=${english}&math=${math}&chinese=${chinese}`);
            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState==4&&xhr.status==200){
            //         var result = JSON.parse(xhr.responseText);
            //         console.log(result);
            //         const {status} = result;
            //         if(status){
            //             // 新增成功 
            //             loadGrade() 
            //             closemodal()
            //             form.name.value = '';
            //             form.class.value = '';
            //             form.chinese.value = '';
            //             form.english.value = '';
            //             form.math.value = '' ;
            //         }
            //     }
            // }

            $.post({
                url:"../php/03_addGrade.php",
                data:{
                    name,
                    class:_class,
                    chinese,
                    english,
                    math
                },
                dataType:"json",
                success:result=>{
                    const {status} = result;
                    if(status){
                        // 新增成功 
                        loadGrade() 
                        closemodal()
                        form.name.value = '';
                        form.class.value = '';
                        form.chinese.value = '';
                        form.english.value = '';
                        form.math.value = '' ;
                    }
                }
            })

        }
        // 获取成绩
        function loadGrade(){
            
            $.get({
                url:"../php/01_getAllGrade.php",
                dataType:"json",
                success:obj=>{
                    console.log(obj)
                    var {status,detail,result} = obj;
                    var html = "";
                    if(status){
                        // 循环数据渲染
                        // class 关键字                         // 
                        result.forEach(({id,name, class:_class, chinese , math , english,total})=>{
                            html+=`
                                <tr id="item${id}" >
                                    <td>${id}</td>
                                    <td>${name} </td>
                                    <td>${_class}</td>
                                    <td>${chinese}</td>
                                    <td>${math}</td>
                                    <td>${english}</td>
                                    <td>${total}</td>
                                    <td><button  onclick="editGradeOne(${id},'${name}','${_class}','${chinese}','${math}','${english}')"  >编辑</button></td>
                                    <td><button onclick="delGradeOne(${id},event)"  >删除</button></td>
                                </tr>
                            `
                        })
                    }else{
                        // colspan  合并单元格
                        html = "<tr> <td colspan='9'>暂无数据</td> </tr>"
                    }
                    tbody.innerHTML = html;
                }
            })
            // // ajax 请求数据
            // var xhr = new XMLHttpRequest();
            // xhr.open("get","../php/01_getAllGrade.php",true);
            // xhr.send();
            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState==4 && xhr.status==200){
            //         var obj = JSON.parse(xhr.responseText);
            //         console.log(obj) 
            //         var {status,detail,result} = obj;
            //         var html = "";
            //         if(status){
            //             // 循环数据渲染
            //             // class 关键字                         // 
            //             result.forEach(({id,name, class:_class, chinese , math , english,total})=>{
            //                 html+=`
            //                     <tr id="item${id}" >
            //                         <td>${id}</td>
            //                         <td>${name} </td>
            //                         <td>${_class}</td>
            //                         <td>${chinese}</td>
            //                         <td>${math}</td>
            //                         <td>${english}</td>
            //                         <td>${total}</td>
            //                         <td><button  onclick="editGradeOne(${id},'${name}','${_class}','${chinese}','${math}','${english}')"  >编辑</button></td>
            //                         <td><button onclick="delGradeOne(${id},event)"  >删除</button></td>
            //                     </tr>
            //                 `
            //             })
            //         }else{
            //             // colspan  合并单元格
            //             html = "<tr> <td colspan='9'>暂无数据</td> </tr>"
            //         }
            //         tbody.innerHTML = html;
            //     }
            // }
        }
        
        // 页面加载成功
        window.onload = function(){
            loadGrade()
        }

        // 删除成绩 通过 id 删除
        function delGradeOne(id,e){
            console.log(id)
            var e = e || window.event  // 事件对象 
            var target = e.target || e.srcElement;   // 当前的目标元素  
            console.log(e)
            if(window.confirm('你真的要删除这个成绩吗?')){
                console.log('yes')
                $.ajax({
                    url:"../php/02_deleteGradeById.php",
                    data:{
                        id
                    },
                    type:"get",
                    dataType:"json",
                    success:obj=>{
                        const {status,detail} = obj;
                        if(status){
                            // 前端删除 
                            // 找到这个 dom 
                            // remove 移除 
                            // location.reload()  // low 
                            // var tr = target.parentElement.parentElement   // 当前的tr元素
                            // tr.remove()
                            var tr = document.getElementById("item"+id);
                            tr.remove();
                        }
                    }
                })

                // // ajax 删除  后端删除 
                // var xhr = new XMLHttpRequest();
                // xhr.open("get","../php/02_deleteGradeById.php?id="+id,true);
                // xhr.send();
                // xhr.onreadystatechange = function(){
                //     if(xhr.readyState==4 && xhr.status==200){
                //         var obj = JSON.parse(xhr.responseText);
                //         console.log(obj) 
                //         const {status,detail} = obj;
                //         if(status){
                //             // 前端删除 
                //             // 找到这个 dom 
                //             // remove 移除 
                //             // location.reload()  // low 
                //             // var tr = target.parentElement.parentElement   // 当前的tr元素
                //             // tr.remove()
                //             var tr = document.getElementById("item"+id);
                //             tr.remove();
                //         }
                        
                //     }
                // }
            }else{
                console.log('no')
            }
        }
    </script>
</body>
</html>